<!--进行中的审批-->
<template>
  <a-card
    style="height: 100%; width: 100%; display: flex; flex-direction: column"
    :bodyStyle="{flex: 1, height: 0}"
  >
    <template #title>
      <a-badge :count="promoterCount" :offset="[10, -2]">
        <cu-icon class="icon-primary" type="org-a-shenpi1" />
        进行中的审批
      </a-badge>
    </template>
    <template #extra>
      <a-button
        type="link"
        size="small"
        @click="goMore">更多&nbsp;&gt;</a-button>
    </template>
    <div ref="listBox" class="approve-box" >
      <a-list :grid="{ column: 2 }" :data-source="workBenchList" :loading="spinning">
        <template #renderItem="{ item, index }">
          <div
            class="list-item"
            :class="index%2 == 0 ? 'have-right-border' : ''"
            @click="goDetail(item)"
          >
            <div style="font-weight: 600; font-size: 14px" class="textEllipsis">
              {{ item.approveTxt }}
            </div>
            <div class="tags textEllipsis">{{ item.approveTag }}</div>
            <a-tooltip>
              <template #title>{{ item.abstract }}</template>
              <div
                class="textEllipsis"
              >
                {{ item.abstract }}
              </div>
            </a-tooltip>

            <a-row type="flex">
              <a-col style="color: rgba(0, 0, 0, 0.45)" :span="24"
              >提交人:</a-col
              >
              <a-col :span="24" class="textEllipsis">{{
                  item.cuser_name
                }}</a-col>
            </a-row>
            <a-row type="flex">
              <a-col style="color: rgba(0, 0, 0, 0.45)" :span="24"
              >发起时间:</a-col
              >
              <a-col :span="24" class="textEllipsis">{{
                  item.launch_time
                }}</a-col>
            </a-row>
          </div>
        </template>
      </a-list>
    </div>
  </a-card>
</template>

<script>
import {defineComponent, ref, reactive, toRefs, onMounted, onBeforeUnmount} from "vue";
import request from "../../../common/utils/request";
import utils from "@/common/utils/utils";
import { message } from "ant-design-vue";
export default defineComponent({
  name: "approveList",
  props: {

  },
  components: { },
  setup(props, context) {
    const state = reactive({
      workBenchList: [],
      listTimer: null,
      spinning: false,
      page: 1,
      pageSize: 10,
      total: 0,
      canNext: true,
      promoterCount: 0, // 进行中的审批个数
    });
    const listBox = ref();
    const scrollTop = ref(0);


    const getData = (isNext) => {
      clearTimeout(state.listTimer);
      state.listTimer = setTimeout(() => {
        state.spinning = true;
        if (isNext) {
          state.page ++;
        }

        let params = {
          page: state.page,
          limit: state.pageSize,
        }
        state.canNext = false;
        request.get("/org", '/workbench/approveModules', params).then((res) => {
          state.spinning = false;
          state.total = res?.total || 0;
          state.promoterCount = res?.promoterCount || 0;
          if (state.page > 1) {
            state.workBenchList = state.workBenchList.concat(res?.data);
          } else {
            state.workBenchList = res?.data;
          }
          state.canNext = true;
        }).catch((err) => {
          state.spinning = false;
        });
      }, 500)
    }


    const handleScroll = () => {
      listBox.value.addEventListener('scroll', () => {
        //获取dom滚动距离
        scrollTop.value = listBox.value.scrollTop;
        //获取可视区高度
        const offsetHeight = listBox.value.offsetHeight;
        //获取滚动条总高度
        const scrollHeight = listBox.value.scrollHeight;
        if (scrollTop.value + offsetHeight >= scrollHeight - 360) {
          // 把距离顶部的距离加上可视区域的高度 等于或者大于滚动条的总高度就是到达底部
          if (state.total > state.workBenchList.length && state.canNext) {
            getData(true);
          }
        }
      })
    };

    const goMore = () => {
      if (window.__MICRO_APP_ENVIRONMENT__) {
        window.microApp.forceDispatch({
          type: "SetMicroPages",
          microInfo: {
            microId: `org_contractApprovalList`,
            app: 'org',
            name: `合同审批列表`,
            url: `/contract/contractApprovalList?noBack=1`,
          }
        })
      } else {
        utils.goMainRoute({name: 'contractApprovalList',})
      }
    };

    const goDetail = (item) => {
      if (window.__MICRO_APP_ENVIRONMENT__) {
        window.microApp.forceDispatch({
          type: "SetMicroPages",
          microInfo: {
            microId: `org_approvalDetail_${item.id}`,
            app: 'org',
            name: `审批详情【${item.cuser_name}】`,
            url: `/contract/contractApproval?contractId=${item.contract_id}&approveId=${item.id}&noBack=1`,
          }
        })
      } else {
        utils.goMainRoute({
          name: 'contractApproval',
          query: {
            contractId: item.contract_id,
            approveId: item.id,
          },
        })
      }
    };


    onMounted(() => {
      handleScroll();
    });
    onBeforeUnmount(() => {
      listBox.value.removeEventListener('scroll', () => { }); // 离开当前组件移除事件监听
    });

    getData();

    return {
      ...toRefs(state),
      listBox,
      goDetail,
      goMore,
    };
  },
});
</script>

<style lang="less" scoped>
.approve-box {
  width: 100%;
  height: 100%;
  padding: 16px 16px;
  overflow-y: auto;
}
.tags {
  max-width: 100%;
  width: fit-content;
  height: 24px;
  line-height: 24px;
  background-color: #fff1c0;
  padding: 0 10px;
  border-radius: 5px;
  color: #ff9329;
}
.list-item {
  font-size: 12px;
  height: 200px;
  color: #666;
  margin-bottom: 0;
  padding: 16px 20px;
  //box-shadow: 1px 0 #f0f0f0, 0 1px #f0f0f0, 1px 1px #f0f0f0, 1px 0 #f0f0f0 inset, 0 1px #f0f0f0 inset;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  &:hover {
    box-shadow: 0 2px 8px #00000026;
  }
}
.have-right-border {
  border-right: 1px solid #f0f0f0;
}
.textEllipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}
.icon-primary {
  color: @primary-color;
  font-size: 18px;
}
:deep(.ant-badge) {
  font-size: inherit;
}
</style>
